<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Sample5: Ext.ux.google.map.StaticMap</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"> </script>
    <script src="../map/Ext.ux.google.map.StaticMap.js" type="text/javascript"></script>
    <script type="text/javascript">
      Ext.onReady(function(){

        var cfg = {
          lat : 35.459237,
          lng : 139.632282,
          width: 500,
          height: 500,
          zoom: 16,
          type: 'satellite',
					key: 'ABQIAAAA3HEaipgCJKasbKv8S1gdbBQRwYGrJs7PTc23wXYGvCkgV6rZmhSdnrJh9Xe77AdhJyXWHiwWb8t7pA',
          markers: [{
            lat : 35.459237,
            lng : 139.632282,
            color: 'white',
            character: 'S'
          }]
        };

        var cfg2 = Ext.applyIf({type: 'roadmap'}, cfg);

        var SM = Ext.ux.google.map.StaticMap;

        Ext.fly('satellite').appendChild(SM.generate(cfg));  
        Ext.fly('roadmap').appendChild(SM.generate(cfg2)).setStyle('opacity', 0);  

        var sl = new Ext.Slider({
          renderTo: Ext.getBody(),
          width: 500,
          increment: 1,
          minValue: 0,
          maxValue: 100,
          listeners: {
            change: function(t,v){
              Ext.fly('roadmap').setStyle('opacity',v/100);  
              Ext.fly('satellite').setStyle('opacity',1-v/100);  
            }
          }
        });

        var zoom = function(){
          var zoomStatus = false;

          return function(inc){
            if(zoomStatus===true) return;

            var currZ = cfg.zoom;
            var newZoom = currZ + inc;
            if(newZoom < 0) { newZoom = 0; return; }
            else if(newZoom > 18) { newZoom = 18; return; }
  
            cfg.zoom = cfg2.zoom = newZoom;
  
            Ext.select('.ext-google-staticmap-img').each(function(e,t,i){
              if(e.parent().dom.id == 'roadmap'){
                zoomStatus = true;
                e.fadeOut({ 
                  remove: true,
                  callback: function(){
                    Ext.fly('satellite').appendChild(SM.generate(cfg)).setStyle('opacity', 1-sl.getValue()/100);  
                    Ext.fly('roadmap').appendChild(SM.generate(cfg2)).setStyle('opacity', sl.getValue()/100);  
                    zoomStatus = false;
                  }
                });
              }else{
                e.fadeOut({ remove: true });
              }
            });
          };
        }();

        var isDblClick = function(){
          var last = 0;

          return function(t){
            var d = t - last;
            if(d < 500){
              last = 0;
              return true;
            }else{
              last = t;
              return false;
            }
          };
        }();

        Ext.fly('roadmap').on('dblclick',function(){ zoom(1); });
        Ext.fly('roadmap').on('contextmenu',function(e,t){
          if(isDblClick(e.getTime())) zoom(-1); 
          e.stopEvent(); 
        });

        Ext.fly('roadmap').on('mousewheel',function(e,t){
          if(!e.getTarget('.ext-google-staticmap-img')) return;
            
          var d = e.getWheelDelta();
          if(d>1){
            zoom(1);
            e.stopEvent();
          }else if(d<-1){
            zoom(-1);
            e.stopEvent();
          }
        });

      });
    </script>
    <style>
      #satellite, #roadmap {
        position: absolute;
        top: 80px;
      }
    </style>
  </head>
  <body>
  <h1>Slider to mix satellite and roadmap</h1>
  <h2>Double-Click to zoom-in / Right-double-click to zoom-out (Mouse wheel to zoom-in/out)</h2>
  <div id='satellite'></div>
  <div id='roadmap'></div>
  </body>
</html>
